<template>
  <div>
    <div>
      <Modal
        width="300"
        v-model="del.modal"
        title="确认框"
        @on-ok="handleDelOk">
        <p>确认删除该记录？</p>
      </Modal>
      <Modal
        width="300"
        v-model="disabled.modal"
        title="提示框"
        @on-ok="handleDisabledOk">
        <p>渠道在停用期间将无法使用，确认停用？</p>
      </Modal>
      <Modal
        width="300"
        v-model="enabled.modal"
        title="提示框"
        @on-ok="handleEnabledOk">
        <p>渠道将恢复正常使用，确认使用？</p>
      </Modal>
      <Tabs>
        <TabPane label="渠道管理">
          <List :current="current" :columns="columns" :data="userPayInfos.userPayInfos.data.recordList"
                :total="userPayInfos.userPayInfos.data.totalCount"
                @on-change="handlePageChange">
            <ListHeader>
              <ListOperations>
                <Button class="margin-right-sm" shape="circle" type="primary" @click="$router.push('channelAdd')">
                  <Icon type="plus-round"></Icon>
                  新增渠道
                </Button>
              </ListOperations>
              <ListSearch>
                <Form ref="formInline" inline>
                  <Form-item prop="title">
                    <Input type="text" placeholder="请输入渠道名称" v-model="search.channelName" style="width: 200px;"
                           @on-enter="handleSearch"/>
                  </Form-item>
                  <Form-item>
                    <Button type="primary" shape="circle" @click="handleSearch">查询</Button>
                  </Form-item>
                </Form>
              </ListSearch>
            </ListHeader>
          </List>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import consts from '@/utils/consts'
  import List, {ListHeader, ListOperations, ListSearch} from '@/components/List'
  import OrderDetail from '@/components/OrderDetail'
  import header from '@/components/header'
  import time from '@/utils/helpers/timeLite'
  import storage from '@/utils/helpers/storageLite'
  import Model from '@/models/apps'

  export default {
    name: 'home',
    components: {
      List,
      ListHeader,
      ListOperations,
      ListSearch,
      OrderDetail,
      'v-header': header
    },
    data () {
      return {
        del: {
          modal: false,
          id: 0
        },
        disabled: {
          modal: false,
          id: 0
        },
        enabled: {
          modal: false,
          id: 0
        },
        current: 1,
        login: true,
        menu: false,
        columns: [
          {
            title: 'ID',
            key: 'id',
            width: 250
          },
/*          {
            title: '产品代码',
            key: 'productCode',
            width: 85
          }, */
          {
            title: '支付类型',
            key: 'payTypeCode',
            width: 120
          },
          {
            title: '渠道名称',
            key: 'channelName',
            width: 229
          },
          {
            title: '状态',
            key: 'status',
            width: 75,
            render (h, params) {
              return h('span', null, params.row.status === 'DISABLED' ? '停用中' : '使用中',)
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 155,
            render (h, params) {
              return h('span', null, time.getDateTime(params.row.createTime))
            }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '2px'
                  },
                  on: {
                    click: () => {
                      this.$router.push('/appManager/' + this.$route.params.id + '/channelEdit/' + params.row.id)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '2px'
                  },
                  on: {
                    click: () => {
                      this.handleStatus(params.row.id, params.row.status)
                    }
                  }
                }, params.row.status === 'DISABLED' ? '启用' : '停用'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '2px'
                  },
                  on: {
                    click: () => {
                      this.handleDel(params.row.id)
                    }
                  }
                }, '删除')
              ])
            }
          }],
        search: {
          channelName: ''
        }
      }
    },
    computed: mapState({
        'userPayInfos': state => state.userPayInfos,
        'allApps': state => state.allApps,
        getCurrentApp (state) {
          return state.allApps.currentApp
        }
      },
    ),
    watch: {
      getCurrentApp (val) {
        this.get()
      }
    },
    created () {
      this.get()
    },
    methods: {
      get (current = 1) {
        this.$set(this, 'current', current)
        this.$store.dispatch('getUserPayInfos', {
          params: {
            current: current,
            limit: consts.PAGE_SIZE,
            userNo: storage.get('userNo'),
            productId: this.$route.params.id,
            ...this.search
          }
        })
      },
      handlePageChange (current) {
        this.get(current)
      },
      handleSearch () {
        this.get()
        this.$set(this, 'current', 1)
      },
      handleDel (id) {
        this.$set(this.del, 'modal', true)
        this.$set(this.del, 'id', id)
      },
      handleStatus (id, status) {
        if (status === 'ENABLED') {
          this.$set(this.disabled, 'modal', true)
          this.$set(this.disabled, 'id', id)
        } else {
          this.$set(this.enabled, 'modal', true)
          this.$set(this.enabled, 'id', id)
        }
      },
      handleDelOk () {
        this.$store.dispatch('deleteUserPayInfo', {
          params: {
            id: this.del.id
          }
        }).then(() => {
          this.$Message.success('删除成功！')
          this.get()
        })
      },
      handleDisabledOk () {
        new Model('userPayInfoStatus')
          .PUT({
            params: {
              id: this.disabled.id,
              'status': 'DISABLED'
            }
          }).then((res) => {
          if (res.data.errorCode === '200') {
            this.$Message.success('操作成功！')
            this.get()
          } else {
            this.$Message.error('未知异常，请重试')
          }
        })
      },
      handleEnabledOk () {
        new Model('userPayInfoStatus')
          .PUT({
            params: {
              id: this.enabled.id,
              'status': 'ENABLED'
            }
          }).then((res) => {
          if (res.data.errorCode === '200') {
            this.$Message.success('操作成功！')
            this.get()
          } else {
            this.$Message.error('未知异常，请重试')
          }
        })
      }
    }
  }
</script>

<style>
</style>
